<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="d1">
  <table border="1">
    <tr>
      <td>照片：</td>
      <td><img :src="person.url" width="100" alt=""></td>
    </tr>
   <tr>
     <td>姓名:</td>
   <td>{{person.name}}</td>
   </tr>
   <tr><td>年龄:</td>
     <td>{{person.age}}</td>
   </tr>
   <tr >
     <td>好友:</td>
     <td>
       <ul  v-for="name in person.friends">
         <li>{{name}}</li>
       </ul>
     </td>
   </tr>
  </table>
  <input type="button" value="请求数据" @click="f()">
</div>
 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
     <script>
         let v = new Vue({
             el:"#d1",
             data:{
                 person:{}
             },
             methods:{
               f(){
                 v.person={name:"访华",age:18,url:"../01.jpg",friends:["刘备","曹操","孙策"]}
               }

             }

         })
     </script>
</body>
</html>